<template>
  <a-modal :open="open" width="600px" title="打印病案" centered @ok="onOk" @cancel="onCancel">
    <div class="flex flex-col h-full">
      <div class="flex items-center">
        <div
          v-for="(item, index) in activeData"
          :key="index"
          class="w-[100px] h-[60px] bg-slate-200 rounded-xl mr-3 flex justify-center items-center text-[16px] relative cursor-pointer"
          :class="itemActive.includes(item.id) ? 'active' : ''"
          @click="onClickActive(item)"
        >
          <div>{{ item.title }}</div>
          <div v-if="itemActive.includes(item.id)" class="active-icon absolute top-0 right-1"><CheckCircleOutlined /></div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { CheckCircleOutlined } from '@ant-design/icons-vue'

const emit = defineEmits(['update:open', 'success'])
defineProps({
  open: Boolean
})

const itemActive = ref([1, 2, 3])
const activeData = ref([
  { title: '第一页', id: 1 },
  { title: '第二页', id: 2 },
  { title: '第三页', id: 3 }
])

const onClickActive = (item) => {
  if (itemActive.value.includes(item.id)) {
    itemActive.value = itemActive.value.filter((id) => id !== item.id)
  } else {
    itemActive.value.push(item.id)
  }
}

const onOk = () => {
  emit('success', itemActive.value)
  onCancel()
}

const onCancel = () => {
  emit('update:open', false)
}

onMounted(() => {
  itemActive.value = getSystemConfig('NMI_REGION_CODE') === '02' ? [1, 2, 3] : [1, 2]
  activeData.value =
    getSystemConfig('NMI_REGION_CODE') === '02'
      ? [
          { title: '第一页', id: 1 },
          { title: '第二页', id: 2 },
          { title: '第三页', id: 3 }
        ]
      : [
          { title: '第一页', id: 1 },
          { title: '第二页', id: 2 }
        ]
})
</script>

<style lang="less" scoped>
.active {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
</style>
